<template>

  <el-button type="primary" @click="batchExportExcel()" v-hasPermission="'customer:export'">批量导出 (Excel)</el-button>
  <el-button type="success" @click="exportExcel()" v-hasPermission="'customer:export'">选择导出 (Excel)</el-button>

  <!-- 客户列表 -->
  <!--
    :data="customerList"  单向绑定表格数据

    @selection-change="handleSelectionChange"   选择改变事件
      勾选或者取消勾选复选框时触发该函数
      注意：这个函数使用的时候不需要加括号，函数触发时会自动传入参数，参数是勾选了复选框的选项数组
  -->
  <el-table
      :data="customerList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <!-- type="selection" 复选框 -->
    <el-table-column type="selection" width="40" />
    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="55" />
    <el-table-column property="ownerDO.name" label="负责人" width="80" />
    <el-table-column property="activityDO.name" label="所属活动" />
    <el-table-column property="clueDO.fullName" label="姓名" width="80" />
    <el-table-column property="appellationDO.typeValue" label="称呼" width="60" />
    <el-table-column property="clueDO.phone" label="手机" width="120" />
    <el-table-column property="clueDO.weixin" label="微信" width="120" />
    <el-table-column property="intentionStateDO.typeValue" label="意向状态" />
    <el-table-column property="productDO.name" label="意向产品" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="stateDO.typeValue" label="线索状态" />
    <el-table-column property="sourceDO.typeValue" label="线索来源" />
    <el-table-column property="nextContactTime" label="下次联系时间" width="165" />
    <el-table-column label="操作" width="160" >
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row  获取当前行上的数据对象 -->
        <el-button type="primary" @click="detail(scope.row.id)" v-hasPermission="'customer:detail'">详情</el-button>
        <el-button type="success" @click="edit(scope.row)" v-hasPermission="'customer:edit'">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--
    分页功能
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 编辑客户信息的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
  -->
  <el-dialog
      v-model="editCustomerDialogVisible"
      title="编辑客户信息"
      width="60%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true">

    <el-form label-width="120px" :model="customerQuery" :rules="customerRules" ref="customerRefForm">

      <!-- 名字 -->
      <el-form-item label="名字">
        <el-input v-model="customerQuery.fullName" disabled />
      </el-form-item>

      <!-- 意向产品 -->
      <el-form-item label="意向产品" prop="product">
        <el-select v-model="customerQuery.product">
          <el-option v-for="product in this.productOptions"
                     :key="product.id"
                     :label="product.name"
                     :value="product.id" />
        </el-select>
      </el-form-item>

      <!-- 是否贷款 -->
      <el-form-item label="是否贷款" prop="needLoan">
        <el-select v-model="customerQuery.needLoan">
          <el-option v-for="needLoan in this.needLoanOptions"
                     :key="needLoan.id"
                     :label="needLoan.typeValue"
                     :value="needLoan.id" />
        </el-select>
      </el-form-item>

      <!-- 下次联系时间 -->
      <el-form-item label="下次联系时间" prop="nextContactTime">
        <!-- type="datetime"  日期选择器的类型（样式） -->
        <!-- value-format     绑定值的格式，向后端提交的格式 -->
        <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
        <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
            v-model="customerQuery.nextContactTime"
            type="datetime"
            placeholder="请选择下次联系时间"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            style="width: 100%;"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editCustomerSubmit()">提交</el-button>
        <el-button @click="this.editCustomerDialogVisible = false">关闭</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>

</template>

<script>
  import {doGet, doPut} from "../http/httpRequest.js";
  import {getToken, messageTip} from "../util/util.js";
  import axios from "axios";

  export default {
    name: "CustomerVIew",

    // 注入父组件函数
    inject: ['reload'],

    data() {
      return {
        // 客户列表
        customerList: [
          {
            clueDO: {},             // 线索
            ownerDO: {},            // 负责人
            activityDO: {},         // 所属活动
            productDO: {},          // 产品
            appellationDO: {},      // 称呼
            needLoanDO: {},         // 是否贷款
            intentionStateDO: {},   // 意向状态
            stateDO: {},            // 线索状态
            source: {}              // 线索来源
          }
        ],

        pageSize: 0,  // 每页记录条数
        total: 0,     // 总记录条数

        // 客户id数组
        customerIdArray: [],

        // 编辑用户对话框是否可见
        editCustomerDialogVisible: false,

        // 客户对象
        customerQuery: { },

        // 意向产品下拉选项
        productOptions: [],

        // 是否贷款下拉选项
        needLoanOptions: [],

        // 编辑客户表单验证规则
        customerRules: {
          product: [
            { required: true, message: '请选择意向产品', trigger: 'blur' },
          ],
          needLoan: [
            { required: true, message: '请选择是否贷款', trigger: 'blur' },
          ],
          nextContactTime: [
            { required: true, message: '请选择下次联系时间', trigger: 'blur' },
          ]
        }
      }
    },

    // 钩子函数，渲染完成后自动执行
    mounted() {
      // 加载客户列表
      this.loadCustomerList(1);

      // 加载产品下拉选项
      this.loadProductOptions();

      // 加载是否贷款下拉选项
      this.loadNeedLoanOptions();
    },

    methods: {
      // 勾选或者取消勾选复选框时触发该函数，并自动传入参数（选项数组）
      handleSelectionChange(selectionItemArray) {
        // 每次触发该函数时，先将存放客户id的数组清空，确保数据不会重复
        this.customerIdArray = [];

        // 遍历勾选的选项数组
        selectionItemArray.forEach( (customer) => {
          // 将勾选的客户id存入数组
          this.customerIdArray.push(customer.id);
        })
      },

      // 加载客户列表
      loadCustomerList(current) {
        // 向后端发送请求，加载客户列表
        doGet("/api/customer/list", {
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 客户列表
            this.customerList = resp.data.data.list;
            // 分页信息
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("客户列表获取失败", "error");
          }
        })
      },

      // 加载产品下拉选项
      loadProductOptions() {
        // 向后端发送请求，获取意向产品下拉选项（查询所有在售的产品）
        doGet("/api/product/list", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.productOptions = resp.data.data;
          } else {
            messageTip("意向产品获取失败", "error");
          }
        })
      },

      // 加载是否贷款下拉选项
      loadNeedLoanOptions() {
        // 向后端发送请求，获取否贷款下拉选项
        doGet("/api/dicValue/needLoan", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.needLoanOptions = resp.data.data;
          } else {
            messageTip("是否贷款下拉选项获取失败", "error");
          }
        })
      },

      // 详情按钮
      detail(id) {
        // 跳转页面
        this.$router.push("/dashboard/customer/detail/" + id);
      },

      // 编辑按钮
      edit(customer) {
        // 客户id
        this.customerQuery.id = customer.id;
        // 线索id
        this.customerQuery.clueId = customer.clueDO.id;
        // 客户名字
        this.customerQuery.fullName = customer.clueDO.fullName;
        // 意向产品（id）
        this.customerQuery.product = customer.productDO.id;
        // 是否贷款（id）
        this.customerQuery.needLoan = customer.needLoanDO.id;
        // 下次联系时间
        this.customerQuery.nextContactTime = customer.nextContactTime;

        // 弹出对话框
        this.editCustomerDialogVisible = true
      },

      // 编辑客户提交按钮
      editCustomerSubmit() {
        // 验证表单规则
        this.$refs.customerRefForm.validate( (isValid) => {
          if (isValid) {
            // 使用FormData对象传参
            let formData = new FormData();
            // 遍历，将客户信息对象中的数据添加到FormData对象中
            for (let field in this.customerQuery) {
              formData.append(field, this.customerQuery[field]);
            }
            doPut("/api/customer/edit", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 指定禁用的日期选择
      disabledDate(time) {
        // 今天之前的日期禁止选择（今天可选）
        return time.getTime() < Date.now() - 8.64e7;
      },

      // 批量导出客户的Excel数据（导出所有客户的信息）
      batchExportExcel() {
        // 1、向后端发送请求
        // 2、后端查询数据库的数据，把数据写入Excel，然后把Excel以IO流的方式输出到前端浏览器
        // 3、前端浏览器弹出一个下载框进行文件下载（浏览器本身实现的，不需要自己实现）

        // 创建iframe标签/元素
        let iframe = document.createElement("iframe");

        // 设置src属性
        // 注意：这里不是使用axios发送的请求，所以无法在请求头中携带token，需要在请求行上携带token，如果不携带token则会报以下错误
        // Refused to display 'http://localhost:8089/' in a frame because it set 'X-Frame-Options' to 'deny'.
        iframe.src = axios.defaults.baseURL + "/api/customer/exportExcel" + "?Authorization=" + getToken();

        // 给iframe设置样式，隐藏起来，不显示在页面上
        iframe.style.display = "none";
        // 将元素追加到body中（元素渲染后会自动向后端发送请求）
        document.body.appendChild(iframe);
      },

      // 选择导出客户的Excel数据（导出勾选的客户信息）
      exportExcel() {

        // 选择导出需要在请求行上提交勾选的客户id参数

        // 判断使用是否勾选了数据，勾选了数据向后端发送请求，没有勾选则弹出提示信息
        if (this.customerIdArray.length > 0) {
          // 创建iframe标签/元素
          let iframe = document.createElement("iframe");
          // 设置src属性
          iframe.src = axios.defaults.baseURL + "/api/customer/exportExcel" + "?Authorization=" + getToken() + "&ids=" + this.customerIdArray;
          // 给iframe设置样式，隐藏起来，不显示在页面上
          iframe.style.display = "none";
          // 将元素追加到body中（元素渲染后会自动向后端发送请求）
          document.body.appendChild(iframe);
        } else {
          messageTip("没有勾选数据", "warning");
        }
      },

      // 分页
      toPage(current) {
        this.loadCustomerList(current);
      }
    }
  }
</script>

<style scoped>

  /* 表格 */
  .el-table {
    margin-top: 20px;   /* 上边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;   /* 上边距 */
  }

</style>

